<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!-- 取出部署的应用程序名或者是当前的项目名称 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>用户后台</title>

    <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
    <%--<link rel="stylesheet" href="${ctx}/assets/css/tpmo/templatemo-style.css">--%>

    <style type="text/css">
        .site-banner h2 {
            font-size: 32px;
            /*font-family: 'robotobold';*/
            margin-bottom: 30px;
        }

        .site-top {
            position: relative;
            z-index: 4;
            background: rgba(0,0,0,0.6);
            margin-bottom: 40px;
            padding-bottom: 60px;
        }

        .site-banner{
            padding-top: 40px;
        }

        .homebg{
            z-index: 0;
            background-image: url("${ctx}/assets/img/tpmo/bg.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .post-masonry .post-thumb {
            border: 3px solid #fff;
            overflow: hidden;
            position: relative;
        }

        .post-thumb:hover{
            background-color: rgba(0,0,0,0.5);
            border: 3px solid orange;
        }

        .post-masonry .post-thumb .title-over {
            position: static;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0,0,0,0.7);
            padding: 15px 20px;
        }

        .blue {
            color: #6BE;
        }

        .green {
            color: #6E6;
        }

        .main-posts {
            position: relative;
            z-index: 6;
        }

        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }


        .post-masonry{
            margin-bottom: 30px;
        }

        .post-masonry .post-thumb img {
            width: 100%;
            display: block;
        }

        .bottomLoading{
            width:100%;
            height:48px;
            position: relative;
            /*top:100%;*/
            /*left:50%;*/
            line-height: 48px;
            color:#fff;
            /*padding-left:60px;*/
            font-size:18px;
            background: url(/assets/img/bottomLoading.gif) no-repeat 45%;
            /*opacity: 0.7;*/
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
            text-align: center;
        }

        .loaded{
            width:100%;
            height:48px;
            position: relative;
            line-height: 48px;
            color:#fff;
            font-size:18px;
            z-index:9999;
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
            filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
            text-align: center;
        }

    </style>
</head>

<body>
    <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>


    <div id="wrap">
        <div class="content" class="homebg">
            <div class="site-top">
                <div class="site-banner">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-8 text-center">
                                <h2><span class="blue">福大</span><span class="green">二手书信息网</span></h2>
                                <p></p>
                            </div>
                        </div>
                        <div class="row">
                            <form action="#" role="form" method="post">
                                <div class="form-group">
                                    <div class="col-sm-6 col-md-offset-3">
                                        <input type="text" class="form-control" id="name" placeholder="书名">
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="submit" class="btn btn-default">搜索</button>
                                        <%--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">--%>
                                    </div>
                                </div>

                                <%--<fieldset class="col-md-offset-4 col-md-3 col-sm-8">--%>
                                <%--<input type="email" id="subscribe-email" placeholder="输入书名">--%>
                                <%--</fieldset>--%>
                                <%--<fieldset class="col-md-5 col-sm-4">--%>
                                <%--<input type="submit" id="subscribe-submit" class="button white" value="搜索">--%>
                                <%--</fieldset>--%>
                            </form>
                        </div>
                    </div>
                </div> <!-- .site-banner -->
            </div> <!-- .site-top -->

            <!-- MAIN POSTS -->
            <div class="main-posts">
                <div class="container">
                    <div class="row">
                        <div class="blog-masonry masonry-true">
                        </div>
                    </div>
                </div>
            </div>

            <%--<div class="loading">--%>
                <%--<span>正在加载...</span></div>--%>
            <%--</div>--%>

            <div id="navigation"><a href="/book/pageData?page=1"></a></div>


            <%--<div class="bottomLoading hidden">正在载入...</div>--%>

            <div class="loaded hidden" >已是最后一页</div>
        </div><!-- /#content -->
    </div><!-- /#wrap -->

    <div id="here" hidden class="post-masonry col-md-4 col-sm-6">
        <div class="post-thumb">
            <img src="${ctx}/assets/img/tpmo/9.jpg" alt="通用的占位符缩略图" width="220px" height="220px">
            <div class="title-over">
                <h4><a href="#">数值计算</a></h4>
                <p>白青云</p>
                <p>100 块</p>
            </div>
        </div>
    </div> <!-- /.post-masonry -->

    <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>

    <script>
        $(document).ready(function() {
            var r = $(".blog-masonry");

            r.imagesLoaded(function(){
                r.isotope({
//                     itemSelector: '.bills_piccon'
                    // ,        columnWidth: 100
                });
            });//这里参数可以为空，但必须要初始化masonry，否则后面会报找不到方法appended。

            r.infinitescroll({
                navSelector: "#navigation", //导航的选择器，会被隐藏
                nextSelector: "#navigation a", //包含下一页链接的选择器
                itemSelector: ".post-masonry", //你将要取回的选项(内容块)
                maxPage: 3,
                state: {
                    currPage: 1
                },
                debug: true, //启用调试信息
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
                bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function() {
                    //alert('error');
                    $('.loaded').removeClass("hidden");
                }, //当出错的时候，比如404页面的时候执行的函数
                localMode: true, //是否允许载入具有相同函数的页面，默认为false
                path: function (page) {
                    console.info("page: " + page);
                    return '/book/pageData?page='+ page +'&pageSize=6&searchText=' + $("#name").val() ;
                },
                dataType: 'json',//可以是json
                template: function(data) {
                    if(data == null){
                        return null;
                    }
                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回调函数
                    var elems = [];
                    for(var i=0; i<data.length; ++i){
                        var elem = $('#here').clone();
                        elem.removeAttr("id").removeAttr("hidden");
                        elem.find("img").attr("src", getMidImgUrl(data[i].cover));
                        elems.push(elem);
                    }
                    return elems;
                },
                loading: {
                    msgText: "加载中...",
                    finishedMsg: '没有新数据了...',
//                    selector: '.loading' // 显示loading信息的div
                }
            }, function(elems) {
                if(elems == null){
                    return;
                }

                r.imagesLoaded(function(){
                    r.isotope('appended', elems).isotope('layout');
//                    r.isotope().append(elems).isotope('appended', elems).isotope('layout');
                });
//                var $newElems = $(newElems);
//                $('.wrapper:eq(1)').masonry('appended', $newElems);
            });

//            r.infinitescroll('update', {
//               state: {
//                   currPage: 1
//               }
//            });

        });
    </script>
    <script>

//        $(function(){
//            var pageNumber = 1, pageSize = 6, searchText = "";
//            var r = $(".blog-masonry");
//
//            $(window).scroll(function(){
//                if($(document).scrollTop() + 50 >= $(document).height()-$(window).height()){
//                    $(".bottomLoading").removeClass("hidden");
//                    searchText = $('#name').val();
//
//                    var datas;
//                    $.ajax({
//                        async: false,
//                        url: path + "/book/pageData",
//                        type: "post",
//                        dataType: "json",
//                        data: {
//                            pageNumber: pageNumber++,
//                            pageSize: pageSize,
//                            searchText: searchText
//                        },
//                        success: function(data){
//                            datas = data;
//                            if(null == datas){
//                                $(".bottomLoading").addClass("hidden");
//                                $('.loaded').removeClass("hidden");
//                                return;
//                            }
//
//                            var elems = [];
//
//                            for(var i=0; i<datas.length; ++i){
//                                var elem = $('#here').clone();
//                                elem.removeAttr("id").removeAttr("hidden");
//                                elem.find("img").attr("src", getMidImgUrl(datas[i].cover));
//                                elems.push(elem);
////                        var elem2 = elem.clone();
////                        var elems = [elem, elem2];
//                            }
//
//                            r.isotope().append(elems).isotope('appended', elems).isotope('layout');
//                            $(".bottomLoading").addClass("hidden");
//                        }
//                    });
//
////                    var datas = getData(pageNumber++, pageSize, searchText);
//
//                }
//            });
//        });
    </script>
</body>

</html>